import { reactive } from "vue";
import type { FormRules } from "element-plus";

/** 自定义表单规则校验 */
export const formRules = reactive(<FormRules>{
  type: [{ required: true, message: "菜单类型为必填项", trigger: "blur" }],
  title: [{ required: true, message: "菜单名称为必填项", trigger: "blur" }],
  path: [{ required: true, message: "菜单路径为必填项", trigger: "blur" }],
  component: [
    { required: true, message: "组件路径为必填项", trigger: "blur" },
    {
      validator: (_, value, callback) => {
        if (value.startsWith("/")) {
          callback(new Error("组件路径前不需要加 / "));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ],
  name: [{ required: true, message: "组件名称为必填项", trigger: "blur" }],
  name2: [{ required: true, message: "外链路径为必填项", trigger: "blur" }],
  frameSrc: [{ required: true, message: "内嵌链接为必填项", trigger: "blur" }],
  sort: [{ required: true, message: "排序为必填项", trigger: "blur" }]
});
